/*
 * 特价商品模块
 * @Author: ljb
 * @Date: 2018-11-15 17:20:45
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-31 16:24:14
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	/*最新文章样式*/
	.article-area {
		width: 100%;
		margin-top: 16*@rem-per-px;
		.article-title {
			width: 100%;
			height: 88*@rem-per-px;
			line-height: 88*@rem-per-px;
			font-size: 28*@rem-per-px;
			color: rgba(0,0,0,.85);
			font-weight: bold;
			text-align: center;
		}
		.article-lists {
			padding-top: 16*@rem-per-px;
		}
		.gutter{
			background: #F9F9F9;
			height: 16*@rem-per-px;
		}
	}
	/*最新文章样式 END*/

</style>
<template>
	<section class="article-area">
		<div class="article-title">{{ $t('home.newest_article') }}</div>
		<div class="article-lists white-bg">
			<article-item
				v-for="(item) in articles"
				:key="item.press_id"
				:title="item.title"
				:count="item.hits"
				:thumb="item.image"
				@click.native="watchDetail(item.press_id)"/>
		</div>
		<div class="gutter"/>
	</section>
</template>

<script>
import articleItem from 'src/views/component/article-item';
import { mapGetters } from 'vuex';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * @vue-prop {Object} [setting={}] - 包含新闻数组的对象
 * @vue-computed {array} articles - 最新新闻
 */
export default {
	name: 'ArticleModule',
	components: {
		articleItem,
	},
	mixins: [appHandle],
	props: {
		setting: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {

		};
	},
	computed: {

		...mapGetters(['getThemeName']),

		/**
		 * 返回最新新闻
		 * @return {Array} {最新新闻的数组}
		 */
		articles() {
			return this.setting ? this.setting.presses : [];
		},
	},
	methods: {

		/**
		 * 查看新闻详情
		 * @param  {String} press_id {当前查看的新闻id}
		 */
		watchDetail(press_id) {
			const detail_url = `${window.location.origin + window.location.pathname + window.location.search}#/article-detail?article_id=${press_id}&theme=${this.getThemeName}`;

			const param = {
				url: detail_url,
			};

			this.handleApp('articleDetail', JSON.stringify(param));
		},
	},
};
</script>
